<template>
	<view class="home">
		<!-- <custom-head-bar :foldState="foldState" id="customeHeadBar"></custom-head-bar> -->
		<!-- <custom-head-bar id="customeHeadBar"></custom-head-bar> -->
		<view
			class="search"
			@click="toSearch"
		>
			<u-icon
				name="search"
				class="icon"
			></u-icon>
			<view class="text">在此处进行搜索</view>
		</view>
		<view class="wrapper">
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view
						scroll-with-animation="true"
						:scroll-top="leftScrollValue"
						scroll-y
						class="sContent"
					>
						<view
							class="navItem"
							:class="index == navIdx ? 'active' : ''"
							v-for="(item, index) in dataList"
							:key="item.id"
							@click="clickNav(index)"
						>
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
				<view class="rightScroll">
					<scroll-view
						@scroll="rightScrollEnt"
						scroll-with-animation="true"
						:scroll-top="rightScrollValue"
						scroll-y
						class="sContent"
					>
						<view
							class="productView"
							v-for="item in dataList"
						>
							<u-sticky
								:customNavHeight="0"
								zIndex="2"
							>
								<view class="proTitle">{{ item.name }}</view>
							</u-sticky>
							<view class="proContent">
								<view
									class="proItem"
									v-for="pro in item.proGroup"
								>
									<product-item :item="pro"></product-item>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<car-layout v-if="buyNum > 0"></car-layout>

		<pro-detail-popup></pro-detail-popup>
		<pro-select-specs></pro-select-specs>
	</view>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';

const goodsCloudObj = uniCloud.importObject('my-mall-goods', {
	customUI: true
});

export default {
	data() {
		return {
			navIdx: 0,
			rightScrollValue: 0,
			leftScrollValue: 0,
			rightHitArr: [],
			leftHitArr: [],
			// foldState: false,
			dataList: []
		};
	},
	async onLoad() {
		await this.getGoodsData();
		this.$nextTick(() => {
			this.getHeightArr();
		});
	},
	methods: {
		// 获取所有商品
		async getGoodsData() {
			let res = await goodsCloudObj.getList();
			console.log(res);
			this.dataList = res.data;
			this.setNumValue();
		},
		setNumValue() {
			// 添加numvalue初始值
			this.dataList.forEach((item, index) => {
				item.proGroup.forEach((child, cindex) => {
					// this.dataList[index].proGroup[cindex].numvalue = 0;
					this.$set(this.dataList[index].proGroup[cindex], 'numvalue', 0);
				});
			});
			// 同步购物车和产品数量
			this.carsList.forEach((item1, index1) => {
				this.dataList.forEach((item2, index2) => {
					let index = item2.proGroup.findIndex((item3) => {
						return item3._id == item1.goods_id;
					});
					// console.log('item1', item1);
					if (index >= 0) {
						// 数组元素响应式
						this.$set(this.dataList[index2].proGroup[index], 'numvalue', item1.numvalue);
					}
				});
			});
		},
		...mapMutations(['setFoldState']),
		clickNav(index) {
			// index为点击的索引值
			if (this.navIdx == index) return;
			else this.navIdx = index;

			if (this.timeout) clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				// 获取滚动高度
				this.rightScrollValue = this.rightHitArr[index];
				this.leftScrollValue = this.leftHitArr[index];
			}, 100);
		},
		// 获取滚动条内容高度
		getHeightArr() {
			let selectQuery = uni.createSelectorQuery();

			let customHeadBar = 0;
			// 获取自定义导航高度
			// selectQuery
			// 	.select('#customeHeadBar')
			// 	.boundingClientRect((rect) => {
			// 		customHeadBar = rect.height;
			// 	})
			// 	.exec();

			// 左侧滚动区域节点组
			selectQuery
				.selectAll('.navItem')
				.boundingClientRect((rects) => {
					this.leftHitArr = rects.map((item) => item.top - customHeadBar - 40);
				})
				.exec();
			// 右侧滚动区域节点组
			selectQuery
				.selectAll('.productView')
				.boundingClientRect((rects) => {
					this.rightHitArr = rects.map((item) => item.top - customHeadBar - 40);
				})
				.exec();
		},
		// 监听右侧滚动条的改变
		rightScrollEnt(e) {
			let scrollTop = Math.ceil(e.detail.scrollTop);

			let idx = this.rightHitArr.findIndex((value, index, arr) => {
				return scrollTop >= value && scrollTop < arr[index + 1];
			});
			this.navIdx = idx;
			this.leftScrollValue = this.leftHitArr[idx];

			if (scrollTop < 300) {
				// this.foldState = false;
				this.setFoldState(false);
			}

			if (scrollTop > 400) {
				// this.foldState = true;
				this.setFoldState(true);
			}
		},
		toSearch() {
			console.log(1234);
			uni.navigateTo({
				url: '/pages/search/search'
			});
		}
	},
	computed: {
		...mapGetters(['buyNum', 'carsList'])
	},
	watch: {
		carsList: {
			deep: true,
			handler(nv, ov) {
				this.setNumValue();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	height: calc(100vh - 50px);
	/* #ifdef MP-WEIXIN */
	height: calc(100vh);
	/* #endif */

	display: flex;
	flex-direction: column;
	.search {
		height: 70rpx;
		width: 600rpx;
		margin: 30rpx;
		@include flex-box-set(start);
		background-color: rgb(242, 242, 242);
		border-radius: 40rpx;
		padding-left: 20rpx;
		.icon {
			font-size: 40rpx;
		}
		.text {
			font-size: 28rpx;
			color: rgb(144, 147, 153);
		}
	}
	.wrapper {
		flex: 1;
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		position: relative;
		z-index: 2;
		overflow: hidden;

		.infoModel {
			color: $text-font-color-1;
			@include flex-box();
			height: 50px;
			background-color: #fff;
			padding: 0 30rpx;
			font-size: 32rpx;
			border-bottom: 1px solid $border-color;

			.right {
				@include flex-box() color: $brand-theme-color-aux;
			}
		}

		.scrollLayout {
			height: 100%;
			@include flex-box();

			.sContent {
				height: 100%;
			}

			.leftScroll {
				height: 100%;
				width: 190rpx;
				border-right: 1px solid $border-color;
				background-color: $theme-back-color;

				.navItem {
					font-size: 30rpx;
					padding-left: 30rpx;
					line-height: 100rpx;
					color: $text-font-color-2;
					position: relative;

					&.active {
						color: $text-font-color-1;
						background-color: #fff;

						&::after {
							content: '';
							height: 30rpx;
							width: 6rpx;
							background-color: $brand-theme-color;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.rightScroll {
				height: 100%;
				flex: 1;
				position: relative;

				.productView {
					padding: 0 30rpx;

					.proTitle {
						font-size: 30rpx;
						line-height: 90rpx;
						background-color: #fff;
					}
				}
			}
		}
	}
}
</style>
